<template>
  <div class="view">
    <div class="wrapper">
      <img :src="url" alt="" class="img">
    </div>
    <div class="watch">
      <img src="@/assets/img/people.svg" alt="">{{watch}}万
    </div>
    <div class="text">
      {{content}}
    </div>
    <div class="up">
      UP{{up}}
    </div>
  </div>
</template>

<script>
  export default {
    name: "Item",
    props: {
      url: {},
      content: {},
      up: {},
      watch: {},
      good: {}
    }
  }
</script>

<style scoped>
  .view {
    flex: 0 0 21%;
    /*flex: auto;*/
    /*box-sizing: border-box;*/
    /*width: 5%;*/
    /*margin-right: 1px;*/
    margin-bottom: 3%;
    position: relative;
    cursor: pointer;
  }

  .wrapper {
    width: 200px;
    height: 120px;
  }
  .wrapper img{
    width: 100%;
    height: 100%;
  }

  .text {
    font: 18px "宋体";
    width: 100%;
    margin-left: 1%;
    margin-right: 1%;
  }
  .up{
    color: gray;
    font: 14px "宋体";
    margin-left: 1%;
  }
  .watch{
    position: absolute;
    top: 48%;
    width:60%;
    height: 50%;
    color: white;
    font-weight: 200;
  }
  .watch img{
    width: 30%;
    height: 30%;
    vertical-align: middle;
  }

</style>